<template>
  <div class="account-application-page">
    <!-- Header -->
    <header class="page-header">
      <div class="container">
        <div class="header-content">
          <div class="header-left">
            <button @click="navigateBack" class="btn-back">
              ← 返回
            </button>
            <div class="header-info">
              <h1>账户申请</h1>
              <p>申请开立新的银行账户</p>
            </div>
          </div>
          <div class="header-right">
            <div class="application-status" v-if="applicationId">
              <span class="status-label">申请状态:</span>
              <span class="status-badge" :class="getStatusClass(applicationForm.status)">
                {{ getStatusText(applicationForm.status) }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- Main Content -->
    <main class="page-main">
      <div class="container">
        <div class="application-container">
          <!-- Application Form -->
          <div class="application-form-card">
            <form @submit.prevent="handleSubmit" class="application-form">
              <div class="form-header">
                <h2>账户申请信息</h2>
                <p>请填写完整的账户申请信息</p>
              </div>

              <!-- Account Type Selection -->
              <div class="form-section">
                <h3>账户类型选择</h3>
                
                <!-- Loading state -->
                <div v-if="isLoadingAccountTypes" class="loading-container">
                  <div class="loading-spinner"></div>
                  <p>正在加载账户类型...</p>
                </div>
                
                <!-- Error state -->
                <div v-else-if="accountTypesError" class="error-container">
                  <p class="error-message">{{ accountTypesError }}</p>
                  <button @click="fetchAccountTypes" class="btn-retry">重试</button>
                </div>
                
                <!-- Account types grid -->
                <div v-else class="account-types-grid">
                  <div 
                    v-for="accountType in accountTypes" 
                    :key="accountType.accountTypeId"
                    class="account-type-card"
                    :class="{ 'selected': applicationForm.account_type_id === accountType.accountTypeId }"
                    @click="selectAccountType(accountType.accountTypeId)"
                  >
                    <div class="account-type-icon">
                      {{ getAccountTypeIcon(accountType.typeName) }}
                    </div>
                    <div class="account-type-info">
                      <h4>{{ accountType.typeName }}</h4>
                      <p>{{ accountType.description }}</p>
                      <div class="account-type-features">
                        <div class="feature">
                          <span class="feature-label">最低余额:</span>
                          <span class="feature-value">¥{{ accountType.minimumBalance !== undefined ? formatCurrency(accountType.minimumBalance) : '0.00' }}</span>
                        </div>
                        <div class="feature">
                          <span class="feature-label">利率:</span>
                          <span class="feature-value">{{ accountType.interestRate !== undefined ? accountType.interestRate : '0' }}%</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="errors.account_type_id" class="error-message">{{ errors.account_type_id }}</div>
              </div>

              <!-- Application Details -->
              <div class="form-section">
                <h3>申请详情</h3>
                <div class="form-row">
                  <div class="form-group">
                    <label for="initial_deposit">初始存款金额 (¥) <span class="required">*</span></label>
                    <div class="input-with-prefix">
                      <span class="input-prefix">¥</span>
                      <input 
                        type="number" 
                        id="initial_deposit" 
                        v-model="applicationForm.initial_deposit" 
                        step="0.01" 
                        min="0"
                        required
                        :class="{ 'error': errors.initial_deposit }"
                        placeholder="请输入初始存款金额"
                      />
                    </div>
                    <div v-if="errors.initial_deposit" class="error-message">{{ errors.initial_deposit }}</div>
                    <div v-if="selectedAccountType && selectedAccountType.minimumBalance !== undefined" class="field-hint">
                      最低余额要求: ¥{{ formatCurrency(selectedAccountType.minimumBalance) }}
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="source_of_funds">资金来源 <span class="required">*</span></label>
                    <select 
                      id="source_of_funds" 
                      v-model="applicationForm.source_of_funds" 
                      required
                      :class="{ 'error': errors.source_of_funds }"
                    >
                      <option value="" disabled>请选择资金来源</option>
                      <option v-for="source in fundsSources" :key="source" :value="source">{{ source }}</option>
                    </select>
                    <div v-if="errors.source_of_funds" class="error-message">{{ errors.source_of_funds }}</div>
                  </div>
                </div>

                <div class="form-group">
                  <label for="purpose">开户目的 <span class="required">*</span></label>
                  <textarea 
                    id="purpose" 
                    v-model="applicationForm.purpose" 
                    required
                    :class="{ 'error': errors.purpose }"
                    placeholder="请描述开户目的，例如：日常储蓄、工资账户、投资理财等"
                    rows="3"
                  ></textarea>
                  <div v-if="errors.purpose" class="error-message">{{ errors.purpose }}</div>
                </div>

                <div class="form-group">
                  <label for="notes">备注信息</label>
                  <textarea 
                    id="notes" 
                    v-model="applicationForm.notes" 
                    :class="{ 'error': errors.notes }"
                    placeholder="其他需要说明的信息（可选）"
                    rows="2"
                  ></textarea>
                  <div v-if="errors.notes" class="error-message">{{ errors.notes }}</div>
                </div>
              </div>

              <!-- Terms Agreement -->
              <div class="form-section">
                <div class="terms-agreement">
                  <label class="checkbox-label">
                    <input type="checkbox" v-model="agreeToTerms" required />
                    <span class="checkmark"></span>
                    我已阅读并同意 <a href="#" class="terms-link">账户开立条款和条件</a>
                  </label>
                </div>
              </div>

              <!-- Form Actions -->
              <div class="form-actions">
                <div v-if="errors.general" class="error-message general-error">
                  {{ errors.general }}
                </div>
                <button type="button" class="btn-reset" @click="resetForm">
                  重置表单
                </button>
                <button 
                  type="submit" 
                  class="btn-submit"
                  :disabled="!canSubmit || isSubmitting"
                >
                  <span v-if="isSubmitting" class="loading-spinner"></span>
                  {{ isSubmitting ? '提交中...' : '提交申请' }}
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </main>

    <!-- Success Modal -->
    <div class="modal" v-if="showSuccessModal">
      <div class="modal-content success-modal">
        <div class="modal-header">
          <h2>申请提交成功</h2>
          <button class="modal-close" @click="showSuccessModal = false">&times;</button>
        </div>
        <div class="modal-body">
          <div class="success-icon">✓</div>
          <p>您的账户申请已成功提交！</p>
          <div class="application-info">
            <div class="info-item">
              <span class="info-label">申请编号:</span>
              <span class="info-value">{{ submittedApplicationId }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">申请状态:</span>
              <span class="info-value">待审核</span>
            </div>
          </div>
          <p class="success-note">我们将在1-3个工作日内处理您的申请，请耐心等待。</p>
          <button class="btn-confirm" @click="closeSuccessModal">确认</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import authService from '../services/authService';
import accountService from '../services/accountService';

const router = useRouter();

// 响应式数据
const applicationId = ref(null);
const isSubmitting = ref(false);
const showSuccessModal = ref(false);
const submittedApplicationId = ref('');
const agreeToTerms = ref(false);
const isLoadingAccountTypes = ref(false);

// 表单数据 - using customerId from current user
const applicationForm = reactive({
  userId: '',  // Will be set in onMounted
  account_type_id: '',
  initial_deposit: '',
  purpose: '',
  source_of_funds: '',
  notes: '',
  status: 'Pending',
  applicationDate: new Date().toISOString()
});

// 错误信息
const errors = reactive({
  account_type_id: '',
  initial_deposit: '',
  purpose: '',
  source_of_funds: '',
  notes: '',
  general: ''
});

// 账户类型数据
const accountTypes = ref([]);
const accountTypesError = ref('');

const fundsSources = [
  '工资收入',
  '投资收益',
  '经营收入',
  '继承财产',
  '礼品赠与',
  '其他合法收入'
];

// 计算属性
const selectedAccountType = computed(() => {
  return accountTypes.value.find(t => t.accountTypeId === parseInt(applicationForm.account_type_id)) || null;
});

const canSubmit = computed(() => {
  return applicationForm.account_type_id && 
         applicationForm.initial_deposit && 
         applicationForm.source_of_funds && 
         applicationForm.purpose && 
         agreeToTerms.value;
});

// 方法
function selectAccountType(accountTypeId) {
  applicationForm.account_type_id = accountTypeId;
  errors.account_type_id = '';
}

// 获取账户类型
async function fetchAccountTypes() {
  isLoadingAccountTypes.value = true;
  accountTypesError.value = '';
  
  try {
    // Check if user is authenticated
    const token = authService.getToken();
    if (!token) {
      console.error('No authentication token found');
      router.push('/login');
      return;
    }
    
    console.log('Fetching account types with token:', token.substring(0, 10) + '...');
    const response = await accountService.getAccountTypes();
    console.log('获取账户类型成功, raw response:', response);
    console.log('Account types data structure:', JSON.stringify(response.data, null, 2));
    
    // 确保返回的数据是数组
    if (Array.isArray(response.data)) {
      accountTypes.value = response.data;
    } else if (response.data && Array.isArray(response.data.content)) {
      // 如果返回的是分页数据
      accountTypes.value = response.data.content;
    } else {
      throw new Error('返回的账户类型数据格式不正确');
    }
    
    // Log the processed account types
    console.log('Processed account types:', accountTypes.value);
    
    // Check for missing or undefined properties
    accountTypes.value.forEach((type, index) => {
      if (type.minimumBalance === undefined) {
        console.warn(`Account type at index ${index} has undefined minimumBalance:`, type);
      }
      if (type.interestRate === undefined) {
        console.warn(`Account type at index ${index} has undefined interestRate:`, type);
      }
    });
  } catch (error) {
    console.error('获取账户类型失败:', error);
    
    // Check if it's an authentication error
    if (error.message.includes('authentication') || error.message.includes('token')) {
      accountTypesError.value = '认证失败，请重新登录';
      setTimeout(() => {
        router.push('/login');
      }, 2000);
    } else {
      accountTypesError.value = '获取账户类型失败，请刷新页面重试';
      
      // 使用备用数据
      accountTypes.value = [
        {
          accountTypeId: 1,
          typeName: '储蓄账户',
          description: '适合日常储蓄，享受稳定利息收益',
          minimumBalance: 100,
          interestRate: 2.5
        },
        {
          accountTypeId: 2,
          typeName: '活期账户',
          description: '灵活存取，适合日常资金周转',
          minimumBalance: 10,
          interestRate: 0.5
        },
        {
          accountTypeId: 3,
          typeName: '定期账户',
          description: '固定期限存款，享受更高利息',
          minimumBalance: 1000,
          interestRate: 4.0
        },
        {
          accountTypeId: 4,
          typeName: '投资账户',
          description: '专业投资理财，多元化投资选择',
          minimumBalance: 10000,
          interestRate: 3.5
        }
      ];
    }
  } finally {
    isLoadingAccountTypes.value = false;
  }
}

function validateForm() {
  let isValid = true;
  
  // Reset errors
  Object.keys(errors).forEach(key => {
    errors[key] = '';
  });
  
  if (!applicationForm.account_type_id) {
    errors.account_type_id = '请选择账户类型';
    isValid = false;
  }
  
  if (!applicationForm.initial_deposit) {
    errors.initial_deposit = '请输入初始存款金额';
    isValid = false;
  } else if (parseFloat(applicationForm.initial_deposit) < 0) {
    errors.initial_deposit = '初始存款金额不能为负数';
    isValid = false;
  } else if (selectedAccountType.value && 
             selectedAccountType.value.minimumBalance !== undefined && 
             parseFloat(applicationForm.initial_deposit) < selectedAccountType.value.minimumBalance) {
    errors.initial_deposit = `初始存款不能低于最低余额要求 ¥${formatCurrency(selectedAccountType.value.minimumBalance)}`;
    isValid = false;
  }
  
  if (!applicationForm.source_of_funds) {
    errors.source_of_funds = '请选择资金来源';
    isValid = false;
  }
  
  if (!applicationForm.purpose) {
    errors.purpose = '请填写开户目的';
    isValid = false;
  } else if (applicationForm.purpose.length > 255) {
    errors.purpose = '开户目的不能超过255个字符';
    isValid = false;
  }
  
  if (applicationForm.notes && applicationForm.notes.length > 255) {
    errors.notes = '备注信息不能超过255个字符';
    isValid = false;
  }
  
  return isValid;
}

async function handleSubmit() {
  if (!validateForm() || !agreeToTerms.value) {
    return;
  }
  
  isSubmitting.value = true;
  
  try {
    // Double-check that we have the user ID
    if (!applicationForm.userId) {
      const userId = accountService.extractUserIdFromToken();
      if (userId) {
        applicationForm.userId = userId;
        console.log('Updated user ID before submission:', userId);
      } else {
        throw new Error('无法获取用户ID，请重新登录');
      }
    }
    
    // 准备提交的数据，按照DTO格式
    const applicationData = {
      userId: applicationForm.userId,
      accountTypeId: parseInt(applicationForm.account_type_id),
      accountTypeName: selectedAccountType.value ? selectedAccountType.value.typeName : '',
      applicationDate: applicationForm.applicationDate,
      status: applicationForm.status,
      initialDeposit: parseFloat(applicationForm.initial_deposit),
      purpose: applicationForm.purpose,
      sourceOfFunds: applicationForm.source_of_funds,
      notes: applicationForm.notes,
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString()
    };
    
    console.log('提交账户申请:', applicationData);
    
    // 调用API提交申请
    const response = await accountService.submitAccountApplication(applicationData);
    console.log('申请提交成功:', response);
    
    // 获取返回的申请ID
    if (response && response.data && response.data.applicationId) {
      submittedApplicationId.value = response.data.applicationId;
    } else {
      // 如果后端没有返回ID，使用时间戳生成一个
      submittedApplicationId.value = `APP${Date.now()}`;
    }
    
    showSuccessModal.value = true;
    
  } catch (error) {
    console.error('提交申请失败:', error);
    errors.general = error.message || '提交申请失败，请重试';
  } finally {
    isSubmitting.value = false;
  }
}

function resetForm() {
  Object.keys(applicationForm).forEach(key => {
    if (key === 'status') {
      applicationForm[key] = 'Pending';
    } else if (key === 'userId') {
      // Keep the current user ID
    } else if (key === 'applicationDate') {
      applicationForm[key] = new Date().toISOString();
    } else {
      applicationForm[key] = '';
    }
  });
  agreeToTerms.value = false;
  Object.keys(errors).forEach(key => {
    errors[key] = '';
  });
}

function closeSuccessModal() {
  showSuccessModal.value = false;
  resetForm();
}

function navigateBack() {
  router.push('/accounts');
}

function getAccountTypeIcon(typeName) {
  const icons = {
    '储蓄账户': '💰',
    '活期账户': '💳',
    '定期账户': '🏦',
    '投资账户': '📈'
  };
  return icons[typeName] || '🏛️';
}

function getStatusClass(status) {
  const classes = {
    'Pending': 'status-pending',
    'Approved': 'status-approved',
    'Rejected': 'status-rejected'
  };
  return classes[status] || 'status-pending';
}

function getStatusText(status) {
  const texts = {
    'Pending': '待审核',
    'Approved': '已批准',
    'Rejected': '已拒绝'
  };
  return texts[status] || '待审核';
}

function formatCurrency(value) {
  // Handle undefined, null, or non-numeric values
  if (value === undefined || value === null || isNaN(value)) {
    return '0.00';
  }
  return value.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

// Debug function to inspect token contents
function debugTokenContents() {
  const token = authService.getToken();
  if (!token) {
    console.error('No token found');
    return;
  }
  
  try {
    const tokenParts = token.split('.');
    if (tokenParts.length === 3) {
      const payload = JSON.parse(atob(tokenParts[1]));
      console.log('Token payload:', payload);
      
      // Check for user ID in different possible fields
      console.log('Possible user ID fields:');
      console.log('- sub:', payload.sub);
      console.log('- id:', payload.id);
      console.log('- userId:', payload.userId);
      console.log('- user_id:', payload.user_id);
    }
  } catch (error) {
    console.error('Error parsing token:', error);
  }
}

// 在组件挂载时获取当前用户ID和账户类型
onMounted(async () => {
  // Check authentication
  const token = authService.getToken();
  if (!token) {
    console.error('No authentication token found');
    router.push('/login');
    return;
  }
  
  console.log('Authentication token found:', token.substring(0, 10) + '...');
  
  // Debug token contents
  debugTokenContents();
  
  // 获取当前用户ID
  const userId = accountService.extractUserIdFromToken();
  if (userId) {
    applicationForm.userId = userId;
    console.log('Current user ID set:', userId);
  } else {
    console.error('Failed to get current user ID');
    // 可以在这里添加重定向到登录页面的逻辑
    router.push('/login');
    return;
  }
  
  // 获取账户类型
  await fetchAccountTypes();
});
</script>

<style scoped>
/* Remove all progress-steps related CSS and add: */

.form-header {
  text-align: center;
  margin-bottom: 2rem;
}

.form-header h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1e40af;
  margin: 0 0 0.5rem 0;
}

.form-header p {
  color: #6b7280;
  margin: 0;
}

.form-section {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.form-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.form-section h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #374151;
  margin: 0 0 1rem 0;
}

.account-type-info h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
  margin: 0 0 0.5rem 0;
}

.btn-reset {
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-reset:hover {
  background-color: #e5e7eb;
}
/* Page Styles */
.account-application-page {
  font-family: 'Arial', sans-serif;
  color: #333;
}

.page-header {
  background-color: #f8fafc;
  padding: 20px 0;
  border-bottom: 1px solid #e2e8f0;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
}

.btn-back {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #4a5568;
  cursor: pointer;
  margin-right: 20px;
}

.header-info h1 {
  font-size: 1.75rem;
  margin: 0;
  color: #2d3748;
}

.header-info p {
  font-size: 1rem;
  color: #718096;
  margin: 5px 0 0 0;
}

.header-right {
  display: flex;
  align-items: center;
}

.application-status {
  display: flex;
  align-items: center;
}

.status-label {
  font-size: 1rem;
  color: #4a5568;
  margin-right: 5px;
}

.status-badge {
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 0.9rem;
  color: white;
}

.status-pending {
  background-color: #f0ad4e;
}

.status-approved {
  background-color: #5cb85c;
}

.status-rejected {
  background-color: #d9534f;
}

.page-main {
  padding: 20px 0;
}

.application-container {
  display: flex;
  justify-content: center;
}

.application-form-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 30px;
  width: 100%;
  max-width: 800px;
}

.application-form {
  display: flex;
  flex-direction: column;
}

.form-row {
  display: flex;
  gap: 20px;
}

.form-group {
  margin-bottom: 20px;
  width: 100%;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: #4a5568;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  font-size: 1rem;
  color: #4a5568;
  transition: border-color 0.2s;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="number"]:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #90cdf4;
  outline: none;
  box-shadow: 0 0 0 2px rgba(144, 205, 244, 0.3);
}

.form-group textarea {
  resize: vertical;
}

.input-with-prefix {
  display: flex;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  overflow: hidden;
}

.input-with-prefix .input-prefix {
  background-color: #edf2f7;
  color: #718096;
  padding: 10px 12px;
  border-right: 1px solid #e2e8f0;
}

.input-with-prefix input {
  border: none;
  padding: 10px;
  font-size: 1rem;
  color: #4a5568;
  flex: 1;
}

.input-with-prefix input:focus {
  outline: none;
  box-shadow: none;
}

.error-message {
  color: #e53e3e;
  font-size: 0.9rem;
  margin-top: 5px;
}

.field-hint {
  color: #718096;
  font-size: 0.875rem;
  margin-top: 5px;
}

.terms-agreement {
  margin-bottom: 20px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #4a5568;
}

.checkbox-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
}

.checkmark {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #cbd5e0;
  border-radius: 3px;
  margin-right: 10px;
  background-color: white;
  transition: background-color 0.2s;
}

.checkbox-label:hover input[type="checkbox"] ~ .checkmark {
  background-color: #edf2f7;
}

.checkbox-label input[type="checkbox"]:checked ~ .checkmark {
  background-color: #3182ce;
  border-color: #3182ce;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.checkbox-label input[type="checkbox"]:checked ~ .checkmark:after {
  display: block;
}

.checkbox-label .checkmark:after {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.terms-link {
  color: #3182ce;
  text-decoration: none;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
}

.btn-submit {
  background-color: #3182ce;
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-submit:hover {
  background-color: #2c71ba;
}

.btn-submit:disabled {
  background-color: #a3b1c6;
  cursor: not-allowed;
}

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top: 3px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Modal Styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.modal-content {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 600px;
  z-index: 1001;
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  font-size: 1.5rem;
  margin: 0;
  color: #2d3748;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #718096;
  cursor: pointer;
}

.modal-body {
  padding: 20px;
  text-align: center;
}

.success-modal .success-icon {
  font-size: 4rem;
  color: #5cb85c;
  margin-bottom: 10px;
}

.success-modal p {
  font-size: 1.125rem;
  color: #4a5568;
  margin-bottom: 15px;
}

.application-info {
  margin-bottom: 20px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.info-label {
  font-weight: 500;
  color: #4a5568;
}

.info-value {
  color: #2d3748;
}

.success-note {
  font-size: 0.875rem;
  color: #718096;
  margin-top: 10px;
}

.btn-confirm {
  background-color: #5cb85c;
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-confirm:hover {
  background-color: #4cae4c;
}

/* Account Type Grid Styles */
.account-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.account-type-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  cursor: pointer;
  transition: transform 0.2s;
  border: 2px solid transparent;
}

.account-type-card:hover,
.account-type-card.selected {
  transform: translateY(-5px);
}

.account-type-card.selected {
  border-color: #3182ce;
}

.account-type-icon {
  font-size: 2.5rem;
  margin-bottom: 10px;
  text-align: center;
}

.account-type-info {
  text-align: left;
}

.account-type-info p {
  color: #718096;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.account-type-features {
  display: flex;
  flex-direction: column;
}

.feature {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.feature-label {
  font-weight: 500;
  color: #4a5568;
}

.feature-value {
  color: #2d3748;
}

/* Required Field Indicator */
.required::after {
  content: " *";
  color: #e53e3e;
}

/* Error Input Style */
.form-group input.error,
.form-group select.error,
.form-group textarea.error {
  border-color: #e53e3e;
  box-shadow: 0 0 0 2px rgba(229, 62, 62, 0.2);
}

/* Loading and Error States */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background-color: #f9f9f9;
  border-radius: 8px;
  margin-bottom: 20px;
}

.loading-spinner {
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: #3182ce;
  animation: spin 1s ease-in-out infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.error-container {
  padding: 20px;
  background-color: #fff5f5;
  border: 1px solid #fed7d7;
  border-radius: 8px;
  margin-bottom: 20px;
  text-align: center;
}

.btn-retry {
  background-color: #3182ce;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  margin-top: 10px;
}

.btn-retry:hover {
  background-color: #2c5282;
}
</style>
